<template>
  <Transition name="slide-fade">
    <div
      v-if="isVisible"
      class="confirm-play-button"
      role="region"
      aria-label="出牌操作区域"
    >
      <div class="button-container" role="group" aria-label="出牌操作按钮">
        <!-- 确认出牌按钮 -->
        <Transition name="button-scale" mode="out-in">
          <button
            v-if="selectedCount > 0"
            key="confirm"
            :disabled="isDisabled || isLoading"
            :class="['btn', 'btn-confirm', { 'btn-disabled': isDisabled }]"
            :aria-label="`确认出牌，已选择${selectedCount}张牌`"
            :aria-disabled="isDisabled || isLoading"
            @click="handleConfirm"
          >
            <span
              v-if="isLoading"
              class="loading-spinner"
              aria-hidden="true"
            ></span>
            <span v-else>确认出牌 ({{ selectedCount }}张)</span>
          </button>

          <!-- 过牌按钮 -->
          <button
            v-else-if="canPass"
            key="pass"
            :disabled="isLoading"
            class="btn btn-pass"
            aria-label="选择过牌"
            :aria-disabled="isLoading"
            @click="handleConfirm"
          >
            过牌
          </button>
        </Transition>

        <!-- 取消选择按钮 -->
        <Transition name="button-slide">
          <button
            v-if="selectedCount > 0"
            :disabled="isLoading"
            class="btn btn-cancel"
            aria-label="取消当前选择"
            :aria-disabled="isLoading"
            @click="handleCancel"
          >
            取消选择
          </button>
        </Transition>
      </div>

      <!-- 状态提示 -->
      <Transition name="fade">
        <div
          v-if="!isValidSelection && selectedCount > 0"
          class="error-message"
          role="alert"
          aria-live="assertive"
        >
          ❌ 选择的牌型不符合规则，请重新选择
        </div>
      </Transition>

      <!-- 必须出牌提示 -->
      <Transition name="fade">
        <div
          v-if="selectedCount === 0 && !canPass"
          class="must-play-message"
          role="alert"
          aria-live="polite"
        >
          ⚠️ 必须出牌，不能过牌
        </div>
      </Transition>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  isVisible: boolean // 是否显示按钮
  isDisabled: boolean // 是否禁用按钮
  selectedCount: number // 已选择卡牌数量
  isValidSelection: boolean // 选择是否有效
  canPass: boolean // 是否可以过牌
}

interface Emits {
  (e: 'confirm'): void // 确认出牌事件
  (e: 'cancel'): void // 取消出牌事件
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const isLoading = ref(false)

// 处理确认出牌
const handleConfirm = async () => {
  if (props.isDisabled || isLoading.value) return

  try {
    isLoading.value = true
    emit('confirm')
  } catch (error) {
    console.error('确认出牌失败:', error)
  } finally {
    // 延迟重置加载状态，给用户视觉反馈
    setTimeout(() => {
      isLoading.value = false
    }, 500)
  }
}

// 处理取消选择
const handleCancel = () => {
  if (isLoading.value) return
  emit('cancel')
}
</script>

<style scoped>
.confirm-play-button {
  position: fixed;
  bottom: 140px; /* 在手牌区域上方 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.button-container {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 120px;
  justify-content: center;
}

.btn-confirm {
  background: linear-gradient(135deg, var(--btn-primary), #e67e22);
  color: white;
  box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
}

.btn-confirm:hover:not(.btn-disabled):not(:disabled) {
  background: linear-gradient(135deg, #e67e22, var(--btn-primary));
  box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.btn-confirm:active:not(.btn-disabled):not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(253, 126, 20, 0.3);
  transition-duration: 0.1s;
}

.btn-pass {
  background: rgba(108, 117, 125, 0.8);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);
}

.btn-pass:hover:not(:disabled) {
  background: rgba(108, 117, 125, 1);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
  transform: translateY(-2px);
}

.btn-cancel {
  background: rgba(220, 53, 69, 0.8);
  color: white;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

.btn-cancel:hover:not(:disabled) {
  background: rgba(220, 53, 69, 1);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
  transform: translateY(-2px);
}

.btn-disabled,
.btn:disabled {
  background: rgba(108, 117, 125, 0.5) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.error-message {
  background: rgba(220, 53, 69, 0.95);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  animation: shake 0.5s ease-in-out;
}

.must-play-message {
  background: rgba(255, 152, 0, 0.95);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 152, 0, 0.5);
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

/* 键盘焦点样式 */
.btn:focus-visible {
  outline: 3px solid rgba(253, 126, 20, 0.8);
  outline-offset: 2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .confirm-play-button {
    bottom: 120px;
  }

  .button-container {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .btn {
    padding: 10px 20px;
    font-size: 14px;
    min-width: 100px;
  }

  .error-message,
  .must-play-message {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    font-size: 16px;
  }

  .button-container {
    gap: var(--spacing-md);
  }

  .confirm-play-button {
    bottom: 130px;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .btn-confirm {
    background: #fd7e14;
    border: 2px solid #ffffff;
  }

  .btn-pass {
    background: #6c757d;
    border: 2px solid #ffffff;
  }

  .btn-cancel {
    background: #dc3545;
    border: 2px solid #ffffff;
  }

  .btn:focus-visible {
    outline: 4px solid #ffffff;
  }

  .error-message {
    border: 2px solid #dc3545;
  }

  .must-play-message {
    border: 2px solid #ff9800;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .slide-fade-enter-active,
  .slide-fade-leave-active,
  .button-scale-enter-active,
  .button-scale-leave-active,
  .button-slide-enter-active,
  .button-slide-leave-active,
  .fade-enter-active,
  .fade-leave-active {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  .btn:active {
    transform: none !important;
  }

  .loading-spinner {
    animation: none !important;
  }

  .error-message {
    animation: none !important;
  }

  .must-play-message {
    animation: none !important;
  }
}

/* 动画效果 */
.slide-fade-enter-active {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-fade-leave-active {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 按钮缩放动画 */
.button-scale-enter-active,
.button-scale-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.button-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* 按钮滑动动画 */
.button-slide-enter-active {
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-slide-leave-active {
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
